<template>
  <div class="container">
    <h1 style="margin-bottom: 20px;font-size: 20px;text-align: center">添加银行卡</h1>
    <!-- 表单开始 -->
    <el-form label-width="100px"
             :model="From"
             status-icon
             :rules="rules"
             ref="From"
             @submit.native.prevent>
      <!-- 银行卡号 -->
      <el-form-item label="银行卡号" required>
        <el-input v-model="From.cardID" disabled></el-input>
      </el-form-item>

      <!-- 开户日期 -->
      <el-form-item label="开户日期" required>
        <el-date-picker v-model="From.openDate" disabled type="date"></el-date-picker>
      </el-form-item>

      <!-- 开户金额 -->
      <el-form-item label="开户金额" required>
        <el-input-number disabled v-model="From.openMoney"></el-input-number>
      </el-form-item>

      <!-- 余额 -->
      <el-form-item label="余额" required>
        <el-input-number disabled v-model="From.balance"></el-input-number>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码" required prop="pass">
        <el-input v-model="From.pass" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" required prop="checkPass">
        <el-input v-model="From.checkPass" show-password></el-input>
      </el-form-item>
      <!-- 银行卡类型 -->
      <el-form-item label="银行卡类型" required prop="cardType">
        <el-select v-model="From.cardType">
          <el-option label="信用卡" value="信用卡"></el-option>
          <el-option label="储蓄卡" value="储蓄卡"></el-option>
        </el-select>
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单结束 -->
  </div>
</template>

<script>
export default {
  name: "AddCard",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.From.checkPass !== '') {
          this.$refs.From.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.From.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    return {
      From: {
        cardID: "",
        openMoney: 0,
        balance: 0,
        pass: '',
        checkPass: "",
        customerID: '',
        cardType: ''
      },
      rules: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
      }
    }
  },
  mounted() {
    this.From.cardID = (Math.floor(Math.random() * 900 + 100) +
        Math.floor(new Date().getTime() + Math.random()).toString().substring(8, 19))
  },
  methods: {
    submitForm() {
      this.From.customerID = JSON.parse(window.localStorage.getItem("user"))[0].customerID
      this.$refs.From.validate((valid) => {
        if (valid) {
          this.postRequest("/api/card", this.From).then(resp => {
            if (resp) {
              if (resp.code == 1) {
                this.$alert('添加成功，', '信息', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.$message({
                      type: 'success',
                      message: `添加成功`
                    });
                  }
                });
              }
              console.log(resp)
            }
          })
        } else {
          this.$message.error('请输入所有字段！');
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  margin-top: 40px;
}
</style>
